
<template>
  <div class="jeepay-m-center" style="margin-top: 5px; margin-left: 20px;">
    <a-steps v-show="(vdata.showStyle == showStyleEnum.step) && !isMobile" :current="vdata.currentStep - 1" type="navigation">
      <a-step title="主体信息" />
      <a-step title="经营信息" />
      <a-step title="结算账户" />
      <a-step title="材料信息" />
    </a-steps>
    <a-divider v-show="!isMobile" />
    <a-divider v-show="isMobile" class="jeepay-m-divider" orientation="left" style="color: #1A66FF;"><span style="color: #2980FD;">{{ vdata.currentStep }}</span>/{{ vdata.steps.length }} {{ vdata.steps[vdata.currentStep - 1] }}</a-divider>
    <!-- 1. 主体信息  -->
    <a-form
      v-show="vdata.showStyle == showStyleEnum.block || vdata.currentStep == 1"
      ref="stepForm1Ref"
      style="margin-top: 20px;"
      :model="applymentDetailInfo"
      :label-col="{ span: 4 }"
      :wrapper-col="{ span: 8 }"
      :rules="vdata.step1Rules"
    >
      <a-divider class="jeepay-m-divider" orientation="left" style="color: #1A66FF;">基础项</a-divider>
      <a-form-item label="商户类型" name="merchantType">
        <a-radio-group v-model:value="applymentDetailInfo.merchantType" defaultValue="1">
          <a-radio :value="1">个人</a-radio>
          <a-radio :value="2">个体户</a-radio>
          <a-radio :value="3">企业</a-radio>
        </a-radio-group>
      </a-form-item>

      <a-form-item label="通联电子账户号" name="taxdetail">
        <a-input v-model:value.trim="applymentDetailInfo.taxdetail" />
      </a-form-item>

      <div v-if="applymentDetailInfo.merchantType != 1">
        <a-divider class="jeepay-m-divider" orientation="left" style="color: #1A66FF;">营业执照</a-divider>
        <a-form-item label="是否为三证合一" name="thrcertflag">
          <a-radio-group v-model:value="applymentDetailInfo.thrcertflag" defaultValue="1">
            <a-radio value="1">是</a-radio>
            <a-radio value="0">否</a-radio>
          </a-radio-group>
        </a-form-item>

        <a-form-item :label="applymentDetailInfo.thrcertflag == '0' ?'税务登记证照片':'营业执照照片'" name="licenseImg">
          <JeepayUpload v-model:src="applymentDetailInfo.licenseImg" bizType="applyment" ocrType="license" @ocrScan="ocrScanFunc" />
          <span class="jeepay-tip-text">(上传图片自动识别 营业执照编号)</span>
        </a-form-item>
        
        <a-form-item :label="applymentDetailInfo.thrcertflag == '0' ?'税务登记号码' :'营业执照编号'" name="licenseNo">
          <a-input v-model:value.trim="applymentDetailInfo.licenseNo" />
        </a-form-item>

        <a-form-item :label="applymentDetailInfo.thrcertflag == '0' ? '注册地址': '营业执照注册地址' " name="licenseAddress">
          <a-input v-model:value.trim="applymentDetailInfo.licenseAddress" />
        </a-form-item>

        <a-form-item class="jeepay-valid" :label="applymentDetailInfo.thrcertflag == '0' ? '税务登记证日期' : '营业执照有效期截止'" name="licenseEffectEnd">
          <a-input v-model:value.trim="applymentDetailInfo.licenseEffectEnd" :disabled="applymentDetailInfo.licenseEffectEnd == '长期'" style="width: 150px;margin-right: 10px;" />
          <a-checkbox :checked="applymentDetailInfo.licenseEffectEnd == '长期' " @change="(e) => applymentDetailInfo.licenseEffectEnd = e.target.checked ? '长期' : '' ">长期</a-checkbox>
        </a-form-item>
      </div>

      <a-form-item label="商户名称" name="mchFullName">
        <a-input v-model:value.trim="applymentDetailInfo.mchFullName" />
      </a-form-item>

      <a-form-item label="商户简称" name="mchShortName">
        <a-input v-model:value.trim="applymentDetailInfo.mchShortName" />
      </a-form-item>
      
      <div>
        <a-divider class="jeepay-m-divider" orientation="left" style="color: #1A66FF;">法人信息</a-divider>

        <a-form-item label="身份证人像面照片" name="idcard1Img">
          <JeepayUpload v-model:src="applymentDetailInfo.idcard1Img" bizType="applyment" ocrType="idCard" @ocrScan="ocrScanFunc" />
          <span class="jeepay-tip-text">(上传图片自动识别 身份证名称 身份证号)</span>
        </a-form-item>

        <a-form-item label="身份证国徽面照片" name="idcard2Img">
          <JeepayUpload v-model:src="applymentDetailInfo.idcard2Img" bizType="applyment" ocrType="idCard" @ocrScan="ocrScanFunc" />
          <span class="jeepay-tip-text">(上传图片自动识别 有效期)</span>
        </a-form-item>

        <a-form-item v-if="applymentDetailInfo.merchantType == 1" label="手持身份证照片" name="idcardInHandImg">
          <JeepayUpload v-model:src="applymentDetailInfo.idcardInHandImg" bizType="applyment" />
        </a-form-item>
        
        <a-form-item label="手机号" name="persontel">
          <a-input v-model:value.trim="applymentDetailInfo.persontel" />
        </a-form-item>

        <a-form-item label="性别" name="idcardSex">
          <a-radio-group v-model:value="applymentDetailInfo.idcardSex" defaultValue="男">
            <a-radio value="男">男</a-radio>
            <a-radio value="女">女</a-radio>
          </a-radio-group>
        </a-form-item>

        <a-form-item label="职业" name="occupation">
          <a-select v-model:value="applymentDetailInfo.occupation" placeholder="法人职业">
            <a-select-option value="1">国家机关、党群组织、企业、事业单位人员</a-select-option>
            <a-select-option value="2">专业技术人员</a-select-option>
            <a-select-option value="3">办事人员和有关人员</a-select-option>
            <a-select-option value="4">商业、服务业人员</a-select-option>
            <a-select-option value="5">农、林、牧、渔、水利业生产人员</a-select-option>
            <a-select-option value="6">生产、运输设备操作人员及有关人员</a-select-option>
            <a-select-option value="7">军人</a-select-option>
            <a-select-option value="8">其他</a-select-option>
          </a-select>
        </a-form-item>

        <a-form-item label="身份证姓名" name="idcardName">
          <a-input v-model:value.trim="applymentDetailInfo.idcardName" />
        </a-form-item>

        <a-form-item label="身份证号" name="idcardNo">
          <a-input v-model:value.trim="applymentDetailInfo.idcardNo" />
        </a-form-item>

        <a-form-item label="住址" name="idcardAddress">
          <a-input v-model:value.trim="applymentDetailInfo.idcardAddress" />
        </a-form-item>

        <a-form-item class="jeepay-valid" label="身份证结束有效期" name="idcardEffectEnd">
          <a-input v-model:value.trim="applymentDetailInfo.idcardEffectEnd" :disabled="applymentDetailInfo.idcardEffectEnd == '长期'" style="width: 150px;margin-right: 10px;" />
          <a-checkbox :checked="applymentDetailInfo.idcardEffectEnd == '长期' " @change="(e) => applymentDetailInfo.idcardEffectEnd = e.target.checked ? '长期' : '' ">长期</a-checkbox>
        </a-form-item>

        <a-form-item label="签字授权书" name="authorpic">
          <JeepayUpload v-model:src="applymentDetailInfo.authorpic" bizType="applyment" />
          <span class="jeepay-tip-text">(法人手机号仍不能通过运营商三要素验证，可上传签字授权书以便合规性审核)</span>
        </a-form-item>
      </div>
    </a-form>

    <!-- 2. 经营信息  -->
    <a-form
      v-show="vdata.showStyle == showStyleEnum.block || vdata.currentStep == 2"
      ref="stepForm2Ref"
      :model="applymentDetailInfo"
      :label-col="{ span: 4 }"
      :wrapper-col="{ span: 8 }"
      :rules="vdata.step2Rules"
    >
      <a-divider class="jeepay-m-divider" orientation="left" style="color: #1A66FF;">门店信息</a-divider>

      <a-form-item v-if="mchApplymentData.ifCode" label="经营类目" name="mccCode">
        <JeepayMccSelect v-model:value="applymentDetailInfo.mccCode" />
      </a-form-item>

      <a-form-item label="经营省市县" name="areaCode">
        <JeepayAreaSelect v-model:value="applymentDetailInfo.areaCode" />
      </a-form-item>

      <a-form-item label="业务场景" name="offlag">
        <a-radio-group v-model:value="applymentDetailInfo.offlag" placeholder="业务场景">
          <a-radio value="0">线下</a-radio>
          <a-radio value="1">线上</a-radio>
        </a-radio-group>
        <a-tag color="orange">（如需开通线上业务，请联系运营平台）</a-tag>
      </a-form-item>

      <a-form-item label="经营区域" name="operatelimit">
        <a-radio-group v-model:value="applymentDetailInfo.operatelimit" placeholder="经营区域">
          <a-radio value="1">城区</a-radio>
          <a-radio value="2">郊区</a-radio>
          <a-radio value="3">边远地区</a-radio>
        </a-radio-group>
      </a-form-item>

      <a-form-item label="经营地段" name="inspect">
        <a-radio-group v-model:value="applymentDetailInfo.inspect" placeholder="经营地段">
          <a-radio value="1">商业区</a-radio>
          <a-radio value="2">工业区</a-radio>
          <a-radio value="3">住宅区</a-radio>
        </a-radio-group>
      </a-form-item>

      <a-form-item label="经营场所" name="businessplace">
        <a-radio-group v-model:value="applymentDetailInfo.businessplace" placeholder="经营场所">
          <a-radio value="1">独立门店、连锁店、专卖店</a-radio>
          <a-radio value="2">综合卖场</a-radio>
          <a-radio value="3">批发市场</a-radio>
          <a-radio value="4">其它</a-radio>
        </a-radio-group>
      </a-form-item>

      <a-form-item label="经营地址" name="address">
        <a-input v-model:value.trim="applymentDetailInfo.address" />
      </a-form-item>

      <a-form-item label="经营内容" name="busdetail">
        <a-input v-model:value.trim="applymentDetailInfo.busdetail" />
        <span class="jeepay-tip-text">内容需小于50字</span>
      </a-form-item>

      <a-form-item label="门头照" name="storeOuterImg">
        <JeepayUpload v-model:src="applymentDetailInfo.storeOuterImg" bizType="applyment" />
      </a-form-item>

      <a-form-item label="店内环境照" name="storeInnerImg">
        <JeepayUpload v-model:src="applymentDetailInfo.storeInnerImg" bizType="applyment" />
      </a-form-item>

      <a-form-item v-if="applymentDetailInfo.merchantType == 1" label="经营者与店铺门头合照" name="storeCashierImg">
        <JeepayUpload v-model:src="applymentDetailInfo.storeCashierImg" bizType="applyment" />
      </a-form-item>

      <a-form-item v-if="applymentDetailInfo.merchantType == 1" label="经营场所证明文件照" name="bizplacepic">
        <JeepayUpload v-model:src="applymentDetailInfo.bizplacepic" bizType="applyment" />
      </a-form-item>

      <a-divider class="jeepay-m-divider" orientation="left" style="color: #1A66FF;">联系人信息</a-divider>

      <a-form-item label="联系人姓名" name="contactName">
        <a-input v-model:value.trim="applymentDetailInfo.contactName" />
      </a-form-item>

      <a-form-item label="联系人手机号" name="contactPhone">
        <a-input v-model:value.trim="applymentDetailInfo.contactPhone" />
      </a-form-item>
      
      <a-form-item label="客服电话" name="servicephone">
        <a-input v-model:value.trim="applymentDetailInfo.servicephone" />
      </a-form-item>
    </a-form>

    <!-- 3. 结算账户  -->
    <a-form
      v-show="vdata.showStyle == showStyleEnum.block || vdata.currentStep == 3"
      ref="stepForm3Ref"
      :model="applymentDetailInfo"
      :label-col="{ span: 4 }"
      :wrapper-col="{ span: 8 }"
      :rules="vdata.step3Rules"
    >
      <a-divider class="jeepay-m-divider" orientation="left" style="color: #1A66FF;">账户信息</a-divider>
      <a-form-item label="结算方式" name="clearmode">
        <a-radio-group v-model:value="applymentDetailInfo.clearmode" @change="() => emit('itemRender')">
          <a-radio value="0">商户自主提现</a-radio>
          <a-radio value="1">结算到银行卡</a-radio>
          <a-radio value="2">结算到通联电子账户</a-radio>
        </a-radio-group>
      </a-form-item>

      <a-form-item label="账户类型" name="settAccountType">
        <a-radio-group v-model:value="applymentDetailInfo.settAccountType" @change="() => emit('itemRender')">
          <a-radio value="B">对公</a-radio>
          <a-radio value="C">对私</a-radio>
        </a-radio-group>
      </a-form-item>

      <a-form-item label="卡折类型" name="accttp">
        <a-radio-group v-model:value="applymentDetailInfo.accttp" @change="() => emit('itemRender')">
          <a-radio value="00">借记卡</a-radio>
          <a-radio value="01">存折</a-radio>
        </a-radio-group>
      </a-form-item>

      <a-form-item label="账户名" name="settAccountName">
        <a-input v-model:value.trim="applymentDetailInfo.settAccountName" />
        <span class="jeepay-tip-text">如：张三</span>
      </a-form-item>

      <div v-if="applymentDetailInfo.settAccountType == 'C'">
        <a-form-item label="结算卡正面" name="settAccountLicenseImg">
          <JeepayUpload v-model:src="applymentDetailInfo.settAccountLicenseImg" bizType="applyment" ocrType="bankCard" @ocrScan="ocrScanFunc" />
        </a-form-item>
      </div>

      <a-form-item label="银行卡号" name="settAccountNo">
        <a-input v-model:value.trim="applymentDetailInfo.settAccountNo" />
      </a-form-item>
      
      <a-form-item label="支行行号" name="cnapsno">
        <a-input v-model:value.trim="applymentDetailInfo.cnapsno" />
        <span><a href="https://www.icvio.cn/" target="_blank">支行行号查询</a></span>
      </a-form-item>

      <a-form-item v-if="applymentDetailInfo.merchantType == 3 && applymentDetailInfo.settAccountType == 'C'" label="对公账户信息" name="pubacctinfo">
        <a-input v-model:value.trim="applymentDetailInfo.pubacctinfo" />
        <span class="jeepay-tip-text">(格式如下：对公账户号#支付行号#对公账户名称)</span>
      </a-form-item>

      <a-form-item v-if="applymentDetailInfo.settAccountType == 'B'" label="开户许可证照片" name="companyAccountLicenseImg">
        <JeepayUpload v-model:src="applymentDetailInfo.companyAccountLicenseImg" bizType="applyment" />
      </a-form-item>

      <div v-if="applymentDetailInfo.settAccountType != 'B'">
        <a-divider class="jeepay-m-divider" orientation="left" style="color: #1A66FF;">结算人信息</a-divider>

        <a-form-item label="是否为法人（自动补全）" name="isSettLegalInfo">
          <a-radio-group v-model:value="applymentDetailInfo.isSettLegalInfo" @change="funLegalInfo(applymentDetailInfo.isSettLegalInfo)">
            <a-radio value="1">是</a-radio>
            <a-radio value="0">否</a-radio>
          </a-radio-group>
        </a-form-item>

        <a-form-item label="结算人身份证人像面照片" name="settAccountIdcard1Img">
          <JeepayUpload v-model:src="applymentDetailInfo.settAccountIdcard1Img" bizType="applyment" ocrType="idCard" @ocrScan="ocrScan2Func" />
          <span class="jeepay-tip-text">(上传图片自动识别 身份证名称 身份证号)</span>
        </a-form-item>

        <a-form-item label="[持卡人]身份证号" name="settAccountIdcardNo">
          <a-input v-model:value.trim="applymentDetailInfo.settAccountIdcardNo" />
        </a-form-item>

        <a-form-item class="jeepay-valid" label="[持卡人]身份证结束有效期" name="settAccountIdcardEffectEnd">
          <a-input v-model:value.trim="applymentDetailInfo.settAccountIdcardEffectEnd" :disabled="applymentDetailInfo.settAccountIdcardEffectEnd == '长期'" style="width: 150px;margin-right: 10px;" />
          <a-checkbox :checked="applymentDetailInfo.settAccountIdcardEffectEnd == '长期' " @change="(e) => applymentDetailInfo.settAccountIdcardEffectEnd = e.target.checked ? '长期' : '' ">长期</a-checkbox>
        </a-form-item>

        <a-form-item v-if="applymentDetailInfo.settAccountType == 'C'" label="结算账户授权书" name="settauthpic">
          <JeepayUpload v-model:src="applymentDetailInfo.settauthpic" bizType="applyment" />
          <span class="jeepay-tip-text">(结算对私非法人必填)</span>
        </a-form-item>
      </div>
    </a-form>

    <!-- 4. 材料信息  -->
    <a-form
      v-show="vdata.showStyle == showStyleEnum.block || vdata.currentStep == 4"
      ref="stepForm4Ref"
      :model="applymentDetailInfo"
      :label-col="{ span: 4 }"
      :wrapper-col="{ span: 8 }"
      :rules="vdata.step4Rules"
    >
      <!-- 企业材料 -->
      <div v-if="applymentDetailInfo.merchantType != 1">
        <a-divider class="jeepay-m-divider" orientation="left" style="color: #1A66FF;">企业信息</a-divider>

        <a-form-item label="是否为法人（自动补全）" name="isLegalInfo">
          <a-radio-group v-model:value="applymentDetailInfo.isLegalInfo" @change="funLegalHolderInfo(applymentDetailInfo.isLegalInfo)">
            <a-radio value="1">是</a-radio>
            <a-radio value="0">否</a-radio>
          </a-radio-group>
        </a-form-item>

        <a-form-item label="股东身份证人像面照片" name="holderIdcard1Img">
          <JeepayUpload v-model:src="applymentDetailInfo.holderIdcard1Img" bizType="applyment" ocrType="idCard" @ocrScan="ocrScan3Func" />
          <span class="jeepay-tip-text">(上传图片自动识别 身份证名称 身份证号)</span>
        </a-form-item>

        <a-form-item label="股东姓名" name="holdername">
          <a-input v-model:value.trim="applymentDetailInfo.holdername" />
        </a-form-item>

        <a-form-item label="股东身份证号" name="holderidno">
          <a-input v-model:value.trim="applymentDetailInfo.holderidno" />
        </a-form-item>

        <a-form-item class="jeepay-valid" label="股东身份证有效期" name="holderexpire">
          <a-input v-model:value.trim="applymentDetailInfo.holderexpire" :disabled="applymentDetailInfo.holderexpire == '长期'" style="width: 150px;margin-right: 10px;" />
          <a-checkbox :checked="applymentDetailInfo.holderexpire == '长期' " @change="(e) => applymentDetailInfo.holderexpire = e.target.checked ? '长期' : '' ">长期</a-checkbox>
        </a-form-item>

        <a-form-item label="注册资本" name="registerfund">
          <a-select v-model:value="applymentDetailInfo.registerfund" placeholder="注册资本">
            <a-select-option value="1">注册资本＜10万元</a-select-option>
            <a-select-option value="2">10万元＜注册资本＜20万元</a-select-option>
            <a-select-option value="3">20万元＜注册资本＜50万元</a-select-option>
            <a-select-option value="4">50万元＜注册资本＜100万元</a-select-option>
            <a-select-option value="5">注册资本＞100万元</a-select-option>
          </a-select>
        </a-form-item>

        <a-form-item label="员工人数" name="stafftotal">
          <a-select v-model:value="applymentDetailInfo.stafftotal" placeholder="员工人数">
            <a-select-option value="1">员工人数＜10</a-select-option>
            <a-select-option value="2">10＜员工数量＜20</a-select-option>
            <a-select-option value="3">20＜员工数量＜50</a-select-option>
            <a-select-option value="4">50＜员工数量＜100</a-select-option>
            <a-select-option value="5">员工数量＞100</a-select-option>
          </a-select>
        </a-form-item>
      </div>

      <div v-if="applymentDetailInfo.offlag == '1'">
        <a-divider class="jeepay-m-divider" orientation="left" style="color: #1A66FF;">网站信息</a-divider>
        <a-form-item label="网站URL/下载地址/平台名称" name="cusurl">
          <a-input v-model:value.trim="applymentDetailInfo.cusurl" />
        </a-form-item>
      
        <a-form-item label="网站名称/应用名称" name="webname">
          <a-input v-model:value.trim="applymentDetailInfo.webname" />
        </a-form-item>
      </div>

      <a-divider class="jeepay-m-divider" orientation="left" style="color: #1A66FF;">产品费率</a-divider>
      <div label="配置费率" name="fee" style="width:100%;">
        <JeepayPaywayRatePanel 
          ref="jeepayPaywayRatePanelRef" 
          :configMode="configMode"
          :infoId=" (mchApplymentData.applyId || '') + '_' + mchApplymentData.mchNo" 
          :selectIfCode="mchApplymentData.ifCode" 
          onlyRate="true"
        />
      </div>
    </a-form>
    <a-divider />

    <div class="jeepay-btn-box jeepay-m-btn-box" style="margin-top: 50px; margin-bottom: 50px;text-align: center;">
      <a-button v-show="vdata.showStyle == showStyleEnum.step && vdata.currentStep > 1" class="jeepay-m-btn" data-type="inline" type="primary" @click="toPrevStep"><left-circle-outlined /> 上一步 </a-button>
      <a-button v-show="vdata.showStyle == showStyleEnum.step && vdata.currentStep < 4" class="jeepay-m-btn" data-type="inline" type="primary" @click="toNextStep">下一步 <right-circle-outlined /> </a-button>
    </div>
  </div>
</template>

<script setup lang="ts">

import {reactive, getCurrentInstance, defineEmits, inject, ref} from 'vue'
import ruleGenerator from '@/utils/ruleGenerator'

// 获取当前实例的代理对象
const { proxy } : any = getCurrentInstance()

const { $infoBox } = getCurrentInstance()!.appContext.config.globalProperties

const jeepayPaywayRatePanelRef = ref()
// 显示类型枚举值
const showStyleEnum = {
  step: 'step',
  block: 'block'
}

// emit： 向父组件进行通讯。 
const emit = defineEmits(['itemRender'])

// 参数注入： 是否手机端
let isMobile : any = inject('isMobile')

// 响应式数据
const vdata : any = reactive({
  showStyle: 'step', // 显示类型： step-分步,  block-整页显示 
  steps: ['主体信息', '经营信息', '结算账户', '材料信息'], 
  isTempData: false, // 是否保存草稿
  payWayFee : '未设置',
  currentStep: 1,
  step1Rules: {
                merchantType: [ ruleGenerator.requiredSelect('商户类型', 'number') ],
                thrcertflag: [ ruleGenerator.requiredSelect('是否为三证合一', 'string') ],
                idcardSex: [ ruleGenerator.requiredSelect('性别', 'string') ],
                occupation: [ ruleGenerator.requiredSelect('职业', 'string') ],
                licenseImg: [ ruleGenerator.requiredUpload('营业执照照片') ],
                idcard1Img: [ ruleGenerator.requiredUpload('法人身份证人像面照片') ],
                idcard2Img: [ ruleGenerator.requiredUpload('法人身份证国徽面照片') ],
                idcardInHandImg: [ ruleGenerator.requiredUpload('手持身份证照片') ],
                licenseNo: [ ruleGenerator.requiredInput('营业执照编号') ],
                licenseAddress: [ ruleGenerator.requiredInput('营业执照注册地址') ],
                licenseEffectEnd: [ ruleGenerator.requiredInput('营业执照截止有限期'), ruleGenerator.dateOrForever ],
                mchFullName: [ ruleGenerator.requiredInput('商户名称') ],
                mchShortName: [ ruleGenerator.requiredInput('商户简称') ],
                idcardName: [ ruleGenerator.requiredInput('法人身份证姓名') ],
                idcardNo: [ ruleGenerator.requiredInput('法人身份证号') ],
                persontel: [ ruleGenerator.requiredInput('法人手机号') ],
                idcardAddress: [ ruleGenerator.requiredInput('住址') ],
                idcardEffectEnd: [ ruleGenerator.requiredInput('身份证有效期截止日期'), ruleGenerator.dateOrForever ],
              },
  step2Rules: {
                mccCode: [ ruleGenerator.requiredSelect('行业') ],
                entType: [ ruleGenerator.requiredSelect('公司类型') ],
                busiType: [ ruleGenerator.requiredSelect('经营类型') ],
                offlag: [ ruleGenerator.requiredSelect('业务场景') ],
                operatelimit: [ ruleGenerator.requiredSelect('经营区域') ],
                inspect: [ ruleGenerator.requiredSelect('经营地段') ],
                businessplace: [ ruleGenerator.requiredSelect('经营场所') ],
            
                busdetail: [ ruleGenerator.requiredInput('经营内容') ],
                servicephone: [ ruleGenerator.requiredInput('客服电话') ],
                mchShortName: [ ruleGenerator.requiredInput('商户简称') ],
                contactName: [ ruleGenerator.requiredInput('联系人姓名') ],
                contactPhone: [ ruleGenerator.requiredInput('联系人电话') ],
                areaCode: [ ruleGenerator.requiredSelect('位置编码', 'array') ],
                address: [ ruleGenerator.requiredInput('经营地址') ],
                storeOuterImg: [ ruleGenerator.requiredUpload('门头照') ],
                storeInnerImg: [ ruleGenerator.requiredUpload('店内环境照') ],
                storeCashierImg: [ ruleGenerator.requiredUpload('经营者与店铺门头合照') ],
                bizplacepic: [ ruleGenerator.requiredUpload('经营场所证明文件照') ],
                
  },
  step3Rules: {
                settAccountNo: [ ruleGenerator.requiredInput('银行帐号') ],
                settAccountName: [ ruleGenerator.requiredInput('开户名') ],
                settAccountIdcardNo: [ ruleGenerator.requiredInput('身份证号') ],
                settAccountIdcardEffectEnd: [ ruleGenerator.requiredInput('身份证有效期截止日期'), ruleGenerator.dateOrForever ],
                settAccountBindPhone: [ ruleGenerator.requiredInput('手机号') ],
                pubacctinfo: [ ruleGenerator.requiredInput('对公账户信息') ],
                settAccountType: [ ruleGenerator.requiredSelect('结算账号类型', 'string') ],
                cnapsno: [ ruleGenerator.requiredInput('支行行号') ],
                clearmode: [ ruleGenerator.requiredSelect('结算方式') ],
                accttp: [ ruleGenerator.requiredSelect('卡折类型') ],
                settAccountLicenseImg: [ ruleGenerator.requiredUpload('银行卡正面照片') ],
                companyAccountLicenseImg: [ ruleGenerator.requiredUpload('开户许可证照片') ],
    
  },
  step4Rules: {
            holdername: [ ruleGenerator.requiredInput('股东姓名') ],
            holderidno: [ ruleGenerator.requiredInput('股东身份证号') ],
            holderexpire: [ ruleGenerator.requiredInput('股东身份证有效期') ],
            cusurl: [ ruleGenerator.requiredInput('网站url/下载地址/平台名称') ],
            webname: [ ruleGenerator.requiredInput('网站名称/应用名称') ],
            storeInnerImg: [ ruleGenerator.requiredUpload('内景照') ],
            registerfund: [ ruleGenerator.requiredSelect('注册资本') ],
            stafftotal: [ ruleGenerator.requiredSelect('员工人数') ],
  },
  
})

// 接收进件参数（包含 商户号， ifCode ）
let mchApplymentDataRef : any = inject('mchApplymentData')
let mchApplymentData : any = mchApplymentDataRef.value

// 接收父组件的进件详细参数
let applymentDetailInfoInject : any = inject('applymentDetailInfo')
let applymentDetailInfo : any = applymentDetailInfoInject.value

// 参数注入： 配置方式
let configMode : any = inject('configMode')


// 下一步
function toNextStep() {
  // 验证是否通过
  proxy.$refs['stepForm'+vdata.currentStep+'Ref'].validate().then( () => {
      vdata.currentStep ++
  })
}

// 上一步
function toPrevStep(){
  vdata.currentStep --
}

function validateAllForm(step: number){
  return proxy.$refs['stepForm'+step+'Ref'].validate().then( () => {
     if(step >= 4){
      return Promise.resolve()
     }
     return validateAllForm(++step)
     
  })
}

// 图片识别的回调函数
function ocrScanFunc(orcObject: any){
  if(orcObject){
    if(orcObject.licenseBusiness) {
      orcObject.licenseBusiness = ''
    }
    if(orcObject.licenseAddress) {
      applymentDetailInfo.address = orcObject.licenseAddress
    }
    Object.assign(applymentDetailInfo, orcObject)
  }
}

// 图片识别的回调函数
function ocrScan2Func(orcObject: any){
  if(orcObject){
    Object.assign(applymentDetailInfo, orcObject)
      // 自动填入 结算卡名称 
    if(orcObject.idcardName){
      applymentDetailInfo.settAccountName = orcObject.idcardName
      applymentDetailInfo.settAccountIdcardNo = orcObject.idcardNo
    }
    if(orcObject.idcardEffectBegin) {
      applymentDetailInfo.settAccountIdcardEffectBegin = orcObject.idcardEffectBegin
      applymentDetailInfo.settAccountIdcardEffectEnd = orcObject.idcardEffectEnd
    }
  }
}

// 图片识别的回调函数
function ocrScan3Func(orcObject: any){
  if(orcObject){
    Object.assign(applymentDetailInfo, orcObject)
      // 自动填入 结算卡名称 
    if(orcObject.idcardName){
      applymentDetailInfo.holdername = orcObject.idcardName
      applymentDetailInfo.holderidno = orcObject.idcardNo
    }
    if(orcObject.idcardEffectBegin) {
      applymentDetailInfo.holderexpire = orcObject.idcardEffectEnd
    }
  }
}

// 点击【保存】的前置事件, 需要返回Promise对象
function saveDataPreCallback(isTemp){

  // 放置费率配置项
  if(jeepayPaywayRatePanelRef.value) {
    let paywayFeeList = jeepayPaywayRatePanelRef.value.getReqMchRatePaywayFeeList()
    if(typeof(paywayFeeList) != 'object'){
        return Promise.reject()
    }
    // 赋值到对象中
    applymentDetailInfo.paywayFeeList = paywayFeeList
  }

  // 保存草稿只校验当前步骤数据
  if (isTemp) {
    return Promise.resolve()
  }

  // 验证所有表单
  return validateAllForm(1).then(() => {
    return Promise.resolve()
  }).catch((params: any) => {
    $infoBox.message.error('数据填写不完整， 请检查后提交')
    return Promise.reject()
  })
}

function funLegalInfo(value) {
  if(value == '1'){
    // 联系人身份证
    applymentDetailInfo.settAccountIdcard1Img = applymentDetailInfo.idcard1Img
    applymentDetailInfo.settAccountIdcardNo = applymentDetailInfo.idcardNo
    applymentDetailInfo.settAccountIdcardEffectEnd = applymentDetailInfo.idcardEffectEnd

  }else {
    applymentDetailInfo.settAccountIdcard1Img = ''
    applymentDetailInfo.settAccountIdcardNo = ''
    applymentDetailInfo.settAccountIdcardEffectEnd = ''
  }
}

function funLegalHolderInfo(value) {
  if(value == '1'){
    // 股东身份证
    applymentDetailInfo.holderIdcard1Img = applymentDetailInfo.idcard1Img
    applymentDetailInfo.holderidno = applymentDetailInfo.idcardNo
    applymentDetailInfo.holderexpire = applymentDetailInfo.idcardEffectEnd
    applymentDetailInfo.holdername = applymentDetailInfo.idcardName

  }else {
    applymentDetailInfo.holderIdcard1Img = ''
    applymentDetailInfo.holderidno = ''
    applymentDetailInfo.holderexpire = ''
    applymentDetailInfo.holdername = ''
  }
}


defineExpose({ saveDataPreCallback })

</script>

<style lang="less" scoped>
.jeepay-tip-text{
  font-size: 10px; color: rebeccapurple
}
.option-left {
  width: 50%;
  word-wrap: break-word; 
  white-space: normal;
  word-break: break-all;
}
.option-right {
  color: rgb(153, 153, 153);
}
.option-bottom {
  word-wrap: break-word; 
  white-space: normal;
  word-break: break-all;
  color: rgb(153, 153, 153);
}
.jeepay-btn-box {
  margin: 15px -12px !important;
}
.jeepay-btn-box .ant-btn {
  margin: 0 10px;
}
</style>